<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0;">
			<el-form :inline="true" :model="filters" style="display: flex">
				<div style="display: flex;flex: 1">
					<el-form-item>
						<el-button @click="reloadPage">刷新</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="warning" :disabled="checkedList.length===0" @click="soldOutAll('down')">下架</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="danger" :disabled="checkedList.length===0" @click="soldOutAll('del')">删除</el-button>
					</el-form-item>
				</div>
				<div>
					<el-form-item>
						<el-input v-model="filters.title" placeholder="快速查找活动"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="lookForList">查询</el-button>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="$router.push({path: '/goodsadd'})">添加活动</el-button>
					</el-form-item>
				</div>
			</el-form>

		</el-col>

		<!--列表-->
		<template>
			<el-table :data="goods" v-loading="loading" stripe style="width: 100%;"@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
<!--				<el-table-column type="index" width="60">-->
<!--				</el-table-column>-->
				<el-table-column prop="displayorder" label="排序" width="100" sortable>
					<template slot-scope="scope">
						<el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput2" v-model="scope.row.displayorder" placeholder="请输入内容" style="width: 100%"></el-input>
						<span style="color: #337ab7;" v-else @click="activeIndex(scope.$index, scope.row)">{{scope.row.displayorder}}</span>
					</template>
				</el-table-column>
				<el-table-column label="头图" width="80" style="padding-bottom: 15px;">
					<template slot-scope="scope">
						<img :src="scope.row.banner" class="head_pic" />
					</template>
				</el-table-column>
<!--				prop="title"-->
				<el-table-column label="名称" sortable>

					<template slot-scope="scope">
						<p class="merch">
							<span style="background-color: #67C23A;padding: 2px 4px;color: #fff;border-radius: 3px;font-size: 10px">{{ scope.row.merch_name}}</span><br>
							<el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput" v-model="scope.row.title" placeholder="请输入内容" style="width: 100%"></el-input>
							<span style="color: #337ab7;" v-else @click="activeInput(scope.$index, scope.row)">{{scope.row.title}}</span>
						</p>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="价格" width="100" sortable>
					<template slot-scope="scope">
						<el-input @blur="updateTitle" autofocus v-if="scope.row.isShowInput1" v-model="scope.row.price" placeholder="请输入内容" style="width: 100%"></el-input>
						<span style="color: #337ab7;" v-else @click="activeInputOne(scope.$index, scope.row)">{{scope.row.price}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="total" label="限额" width="100" sortable>
				</el-table-column>
				<el-table-column prop="sales" label="已报名" width="100" sortable>
				</el-table-column>
				<el-table-column label="状态" width="100" >
					<template slot-scope="scope">
						<el-button :type="miStatusColor(scope.row.status)" size="mini" @click="handleSta(scope.$index, scope.row)">{{ formatSta(scope.row) }}</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作"  width="220">
					<template slot-scope="scope">
						<el-tooltip class="item" effect="dark" content="编辑" placement="top">
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="复制链接" placement="top">
							<el-button size="mini" @click="handlecopy(scope.$index, scope.row)" icon="fa fa-link" circle></el-button>
						</el-tooltip>
<!--						<el-tooltip placement="left-start">-->
<!--							<div slot="content"><img src="http://192.168.3.132:20097/storage/activity/activityqrcode/6f4922f45568161a8cdf4ad2299f6d23.jpg" alt="" style="width: 100px;height: 100px;"></div>-->
<!--							<el-button size="mini" icon="fa fa-qrcode" circle @mouseenter="handleqrcode(scope.$index, scope.row)"></el-button>-->
<!--						</el-tooltip>-->

<!--						<el-button size="mini" v-popover:popover1 @click="handleqrcode(scope.$index, scope.row)" icon="fa fa-qrcode" circle></el-button>-->
						<el-popover
								ref="popover1"
								placement="left-start"
								trigger="click">
							<img :src="code" alt="" style="width: 120px;height: 120px;">
						</el-popover>
						<el-tooltip class="item" effect="dark" content="二维码" placement="top">
							<el-button size="mini" v-popover:popover1 @click="handleqrcode(scope.$index, scope.row)" icon="fa fa-qrcode" circle style="margin: 0 10px;width: 29px;height: 29px"></el-button>
						</el-tooltip>
						<el-popover
								ref="popover1"
								placement="left-start"
								trigger="click">
							<img :src="code" alt="" style="width: 120px;height: 120px;">
						</el-popover>
						<el-tooltip class="item" effect="dark" content="报名数据" placement="top">
							<el-button size="mini" @click="activityOrderList(scope.$index, scope.row)" icon="fa fa-navicon" circle></el-button>
						</el-tooltip>
						<el-tooltip class="item" effect="dark" content="删除" placement="top">
							<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
						</el-tooltip>
					</template>

				</el-table-column>

			</el-table>
<!--			<div class="is-code" style="width: 100px;height: 100px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;z-index: 9999">-->
<!--				<img :src="code" alt="" style="width: 100%">-->
<!--			</div>-->

			<!-- 页码 -->
			<el-col :span="24" class="toolbar">
				<!--            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"-->
				<!--                           :page-sizes="pageSizes" :page-size="PageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">-->
				<!--            </el-pagination>-->
				<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="pageSizes"
						:page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalCount">
				</el-pagination>
			</el-col>
		</template>

	</section>
</template>
<script>
	import { getActiveList,soldOutDelete,editActive } from '../../api/goodsAPI'
	export default {
		data() {
			return {
				totalCount: 0, // 总共多少条
				pageSize: 10, // 每页显示条目个数
				pageSizes: [10, 20, 30, 40], // 每页显示个数选择器的选项设置
				currentPage: 1, // 当前页数
				filters: {
					title: '' // 查询的关键字
				},
				loading: false,
				miStatusColor: function(val) {
					if (val === 1) {
						return 'primary'
					} else {
						return 'warning'
					}
				},
				goods: [], // 活动列表
				checkedList: [], // 选中的活动列表
				titleName: '', // 名称
				presentObj: {}, // 修改的当前对象
				code: '' // 二维码
			}
		},
		methods: {
			activeIndex(index, row) {
				this.goods.forEach(i => {
					i.isShowInput2 = false
				})
				row.isShowInput2 = true;
				console.log(row)
				this.presentObj = row
			},
			activeInput(index, row) {
				this.goods.forEach(i => {
					i.isShowInput = false
				})
				row.isShowInput = true;
				console.log(row)
				this.presentObj = row
			},
			activeInputOne(index, row) {
				this.goods.forEach(i => {
					i.isShowInput1 = false
				})
				row.isShowInput1 = true;
				console.log(row)
				this.presentObj = row
			},
			// 修改名称
			updateTitle() {
				console.log(this.presentObj)
				editActive(this.presentObj).then(res => {
					this.goods.forEach(i => {
						i.isShowInput = false
						i.isShowInput1 = false
						i.isShowInput2 = false
					})
					this.$message({
						message: '修改成功',
						type: 'success'
					})
					this._getactivity()
				}).catch(err => {
					this.goods.forEach(i => {
						i.isShowInput = false
						i.isShowInput1 = false
						i.isShowInput2 = false
					})
					this.$message({
						message: err.response.data.message,
						type: 'error'
					})
				})
			},
			// 分页的
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				// 改变每页显示的条数
				this.pageSize = val;
				this._getactivity()
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},
			// 分页的
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.currentPage = val;
				this._getactivity()
			},
			// 刷新页面
			reloadPage() {
				// window.location.reload(); // 刷新当前页面
				location.reload();
			},
			// 打钩的事件
			handleSelectionChange(val) {
				this.checkedList = val;
				console.log(val)
			},
			// 查询点击
			lookForList() {
				this._getactivity()

			},
			// 批量下架
			soldOutAll(item) {
				let ids = this.checkedList.map(item => item.id)
				console.log(ids)
				console.log(item)
				let data = { ids: ids }
				if (item === 'down') {
					data = { ...data, status: 0 }
					console.log(data)

					this.$confirm('确认下架吗？', '提示', {
						type: 'warning'
					}).then(() => {
						soldOutDelete(data).then(res => {
							this.$message({
								type: 'success ',
								message: '下架成功'
							});
							this._getactivity()
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});

				} else {
					data = { ...data, delete: 1 }
					console.log(data)
					this.$confirm('确认删除吗？', '提示', {
						type: 'warning'
					}).then(() => {
						soldOutDelete(data).then(res => {
							this.$message({
								type: 'success ',
								message: '删除成功'
							});
							this._getactivity()
						}).catch(err => {
							this.$message({
								message: err.response.data.message,
								type: 'error'
							})
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				}

			},
			//状态显示转换
			formatSta(row, column) {
				// return row.status === 1 ? '启用' : row.status === 0 ? '禁用' : '未知';
				return row.status === 1 ? '上架中' : row.status === 0 ? '已下架' : '未知';
			},
			//获取活动列表
			_getactivity() {
				let params = {
					// page: this.page,
					// name: this.filters.name
					p: this.currentPage,
					length: this.pageSize,
					keyword: this.filters.title,
					status: 1
				};
				this.listLoading = true;
				// NProgress.start();
				getActiveList(params).then(res => {
					this.listLoading = false;
					res.data.list.forEach(obj => {
						obj.isShowInput = false
						obj.isShowInput1 = false
						obj.isShowInput2 = false
					})
					this.goods = res.data.list;
					this.totalCount = res.data.total
					console.log(this.goods)
				}).catch(err => {
					this.$message({
						message: err.response.data.message,
						type: 'error'
					})
				})
				// this.$axios.get("/api/admin/activity/list")
				// .then(res=>{
				// 	this.listLoading = false;
				// 	this.goods=res.data.data.list;
				// })
				// .catch(err=>{
				// 	console.log(err)
				// })
			},
			// 下架和上架按钮
			handleSta(index, row) {
				console.log(row)
				let text = "";
				if (row.status === 1) {
					text = "确认下架？";
					this.$confirm(text, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let data = {
							ids: row.id,
							status: 0
						}
						soldOutDelete(data).then(res => {
							this.$message({
								type: 'success',
								message: '下架成功!'
							});
							this._getactivity()
						}).catch(err => {
							this.$message({
								message: err.response.data.message,
								type: 'error'
							})
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				} else {
					text = "确认上架？";
					this.$confirm(text, '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						let data = {
							ids: row.id,
							status: 1
						}
						soldOutDelete(data).then(res => {
							this.$message({
								type: 'success',
								message: '上架成功!'
							});
							this._getactivity()
						}).catch(err => {
							this.$message({
								message: err.response.data.message,
								type: 'error'
							})
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
				}

			},
			// 编辑按钮
			handleEdit(index, row) {
				console.log(index, row);
				this.$router.push({path: '/editActivity',query: {id: row.id}})
			},
			// 复制按钮
			handlecopy(index, row) {
				console.log(index, row)
				const input = document.createElement('input')
				document.body.appendChild(input)
				input.setAttribute('value', `https://mobile.laiba.shop/html/#/pages/active/detail?id=${row.id}`)
				input.select()
				if (document.execCommand('copy')) {
					document.execCommand('copy')
				}
				document.body.removeChild(input)
				this.$message({
					type: 'success',
					message: '复制成功!'
				});
			},
			// 每行的 删除按钮 删除 单条数据
			handleDelete(index, row) {
				console.log(index, row);
				let data = {
					ids: row.id,
					delete: 1
				}
				this.$confirm('确认删除, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					soldOutDelete(data).then(res => {
						this.$message({
							type: 'success ',
							message: '删除成功'
						});
						console.log(data)
						this._getactivity()
					}).catch(err => {
						this.$message({
							message: err.response.data.message,
							type: 'error'
						})
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 二维码点击事件
			handleqrcode(index, row) {
				console.log(index,row)
				this.code = row.qrcode
			},
			// 报名情况
			activityOrderList(index, row) {
				console.log(index,row)
				this.$router.push({path: '/activityOrder',query: {id: row.id}})
			}
		},
		created() {
			this._getactivity(); // 获取活动列表
		},

	};
</script>

<style scoped lang="scss">
	@import '~scss_vars';

	.head_pic {
		width: 40px;
		height: 40px;
		padding: 1px;
		border: 1px solid #ccc;
		vertical-align: middle;
		margin: 3px 0;
	}
	.el-table .cell {
		padding: 3px;
	}

</style>
